<nz-page-header
  class="site-page-header"
  (nzBack)="onBack()"
  nzBackIcon
  nzTitle="系统功能"
  [nzSubtitle]="subtitleTpl"
></nz-page-header>
<ng-template #subtitleTpl>
  使用<nz-tag>TipsModalService</nz-tag>服务和<nz-tag>ConfirmModalService</nz-tag>服务显示对话框。
  <br />
  结果页，包括404，403等。
  <br />
  使用<nz-tag>GlobalSpinService</nz-tag>服务创建全局的加载中状态
</ng-template>

<nz-card>
  <nz-tabset nzTabPosition="right">
    <nz-tab nzTitle="对话框">
      <div nz-row [nzGutter]="[8, 8]">
        <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="12" nzXl="12">
          <nz-card nzTitle="确认对话框">
            <app-modal-confirm></app-modal-confirm>
          </nz-card>
        </div>

        <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="12" nzXl="12">
          <nz-card nzTitle="提示对话框">
            <app-modal-tips></app-modal-tips>
          </nz-card>
        </div>
      </div>
    </nz-tab>

    <nz-tab nzTitle="结果页">
      <div nz-row [nzGutter]="[8, 8]">
        <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="12" nzXl="12">
          <nz-card nzTitle="404，403结果页"><app-result-exception></app-result-exception></nz-card>
        </div>

        <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="12" nzXl="12">
          <nz-card nzTitle="自定义结果页"><app-result-picture></app-result-picture></nz-card>
        </div>
      </div>
    </nz-tab>

    <nz-tab nzTitle="其他">
      <div nz-row [nzGutter]="[8, 8]">
        <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="12" nzXl="12">
          <nz-card nzTitle="全局加载状态"> <app-global-spin></app-global-spin></nz-card>
        </div>

        <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="12" nzXl="12">
          <nz-card nzTitle="单行文本编辑"><app-single-input-modal></app-single-input-modal></nz-card>
        </div>
      </div>
    </nz-tab>
  </nz-tabset>
</nz-card>
